<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <!-- 
        总结
            a. data 基本上来说，就是一个普普通通的对象，学习阶段主要使用
            b. data 也可以写成函数的方式，return 返回一个对象的写法, 以后组件化中使用
            c. 对象的方法如果要简写，一定不要写成箭头函数，而应该直接对象方法简写
     -->
</head>
<body>
    <div id="app" class="box">
        <h1>hello {{ msg }}</h1>
    </div>

    <script>
    Vue.config.productionTip = false

    const data = {
            msg: '尚硅谷',
            num: 100
        }

    const vm = new Vue({
        el: '#app',

        // 方式1创建数据
        data,

        // 方式2创建数据
        // data: function() {
        //     return {
        //         msg: '迪丽热巴',
        //         num: 20
        //     }
        // }
        // data如果写成函数，一定一定一定不要写成箭头函数（不推荐）
        // data: () => {
        //     console.log(this)
        //     return {
        //         msg: '迪丽热巴',
        //         num: 20
        //     }
        // }
        // 要求如果要写简写，一定是对象的简写方式 (推荐)
        // data() {
        //     console.log(this)
        //     return {
        //         msg: '迪丽热巴',
        //         num: 20
        //     }
        // }
    })

    console.log(vm)

    </script>
</body>
</html>